<template>
  <el-row :gutter="15" align="middle">
    <!-- 输入框类型 -->
    <el-col :span="24" v-if="attr.type == 'input'">
      <el-form-item>
        <template #label>
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <i class="el-icon-info margin-left-4" />
          </el-tooltip>
        </template>
        <el-input size="mini" v-model="attr.value" placeholder="请输入" />
      </el-form-item>
    </el-col>
    <!-- 开关属性 -->
    <el-col :span="24" v-if="attr.type == 'switch'">
      <el-form-item>
        <template #label>
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <i class="el-icon-info margin-left-4" />
          </el-tooltip>
        </template>
        <el-switch size="mini" v-model="attr.value" />
      </el-form-item>
    </el-col>
    <!-- 数字类型 -->
    <el-col :span="24" v-if="attr.type == 'input_number'">
      <el-form-item>
        <template #label>
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <i class="el-icon-info margin-left-4" />
          </el-tooltip>
        </template>
        <el-input-number v-model="attr.value" size="mini" controls-position="right" class="wft-w-100" />
      </el-form-item>
    </el-col>
    <!-- 颜色类型 -->
    <el-col :span="24" v-if="attr.type == 'input_color'">
      <el-form-item>
        <template #label>
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <i class="el-icon-info margin-left-4" />
          </el-tooltip>
        </template>
        <div class="wft-flex">
          <el-input size="mini" clearable v-model="attr.value" class="wft-w-85" />
          <el-color-picker size="mini" v-model="attr.value" show-alpha />
        </div>
      </el-form-item>
    </el-col>
    <!-- 下拉框属性 -->
    <el-col :span="24" v-if="attr.type == 'select'">
      <el-form-item>
        <template #label>
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <i class="el-icon-info margin-left-4" />
          </el-tooltip>
        </template>
        <el-select class="wft-w-100" size="mini" v-model="attr.value">
          <el-option
            v-for="item in attr.select"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-col>
    <!-- 特殊处理 -->
    <el-col :span="24" v-if="attr.type == 'rules'">
      <el-form-item>
        <template #label>
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <i class="el-icon-info margin-left-4" />
          </el-tooltip>
        </template>
        <EditorModel
          language="json"
          :text="attr.label"
          :dialogTitle="attr.label"
          :value="JSON.stringify(attr.value)"
          @input="ruleParse"
          :params="''"
        >
          <template #tips>
            <p>配置校验json，示例可参考：https://www.uviewui.com/components/form.html</p>
          </template>
        </EditorModel>
      </el-form-item>
    </el-col>
  </el-row>
</template>
<script>
import EditorModel from '../EditorModel/index.vue'
export default {
  components: { EditorModel },
  props: {
    attr: {
      type: Object,
      required: true
    }
  },
  methods: {
    ruleParse(val) {
      try {
        this.attr.value = JSON.parse(val)
      } catch(e) {
        this.$message.error('数据有误！')
      }
    }
  }
}
</script>
<style scoped>
.wft-w-85 {
  width: 85%;
}

.wft-w-100 {
  width: 100%;
}

.wft-w-82 {
  width: 82%;
}

.wft-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wft-upload-bg img {
  width: 100%;
  height: 100%;
}

.icon-config-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 4px;
}

.icon-config-item {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  margin-left: 15px;
  border: 1px solid #DCDFE6;
  border-radius: 3px;
  cursor: pointer;
  transition: all .3s;
}

.icon-config-item:hover {
  border-color: #c0c4cc;
  transform: scale(1.04, 1.04);
}

.margin-left-4 {
  margin-left: 4px;
}
</style>
